<template>
<div>

    <div class="nav">
            <p class="new">
            <img  src="../../img/1.png">&nbsp;&nbsp;最新动态</p>
            <p class="sett"> <img src="../../img/2.png">&nbsp;&nbsp;设置</p>
            <hr>
            <img  class=imgright src="../../img/3.png">
            <img class=imgleft src="../../img/4.png">
            <img class="fans" src="../../img/5.png">
        <div class="hot">
            <p>热门回答，来自&nbsp;&nbsp;&nbsp;&nbsp;机械&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">关注话题</a></p>
            <p class="results">人类史上令人叹为观止的极限精度制造成果有哪些？</p>
            <p class="fans" id="nums">6551</p>
        </div>
        <div class="he">
            <p class="results" id="vi">Vincent Fu，<span class="phd">&nbsp;&nbsp;Materials Science，PhD</span> </p> 
            <img class="imgleft" id="te"  src="../../img/6.png">
        </div>
        <div>
            <p class="precision">
            说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，就算你拿出一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深... <a href="#">显示全部</a>
            </p>
        </div>
        <div>
            <div class="fl"><img class="flimg" src="../../img/7.png">&nbsp;&nbsp;&nbsp;&nbsp;关注问题
</div>
            <img src="../../img/8.png">
            <img src="../../img/9.png">
        </div>
     </div>




</div>
 
</template>

<script>
    export default {

    }
</script>

<style scoped>

    .nav{
        display: block;
        width:800px;
        padding:5px;
        margin: 0px auto;
        overflow: hidden;
    }
    .new{
        /* 绝对定位，绝对定位是基于最近的一个定位了的父容器 
        ‘最新资讯’的这个p，其定位了的父容器即 class="nav" 的div，
        所以 "最新资讯" 这个p 出现的位置是以这个div 为基础的 */
        position: absolute;
        text-align:left;
        white-space: pre;
    }
    .sett{
        text-align:right;
    }
    .imgleft { 
        float:left;
        padding: 16px 20px 2px 2px;
        width: 10%;
        } 
    .imgright{
        float: right;
        padding: 16px 20px 2px 2px;
    }
    .hot{
        vertical-align:top;
        font-weight: 10px;
        text-align: left;
        white-space: nowrap;
        padding-top:15px;
    }

    .results{
        font-family: 微软雅黑;
        font-weight: bold;
        font-size: 15px;
        text-align: left;
        top: 80px;
        color: rgb(3, 1, 100);
    }
    .fans{
        margin: 0px;
        top: 200px;
        left: 330px;
        position:absolute;
        height: 25px;
        width:60px ;
    }
    a{
        text-align: right;
        text-decoration:none;
    }
    #nums{
        z-index: 1;
        text-align: center;
    }
    .he{
        float: left;
    }
    #vi{
        color: black;
        top: 15px;
        font-size: 20px;
        position: relative;
    }
    .phd{
        white-space: pre-wrap;
        color: black;
        font-size: 20px;
        font-weight:normal;
        position: relative;
    }
    #te{
        width: 80%;
        border-top: 10px;
        padding: 30px 0px 0px 0px;
    }
    .precision{
        float: right;
        width: 50%; 
        z-index: 1;
        display: block;
        top: -150px;
        font-family: 微软雅黑;
        font-size: 18px;
        text-align: left;
        position: relative; 
    }
    .flimg{
        width: 20%;

    }
    .fl{
        left: 420px;
        top: 400px;
        position: absolute; 

    }


</style>
